<!--
 * @Author: coocase
 * @Date: 2021-03-12 09:30:43
 * @LastEditTime: 2021-04-18 15:46:55
 * @LastEditors: coocase
 * @Description: 注册
 * @FilePath: \git\dami\src\pages\register\register.vue
-->
<template>
  <div class="register-wrap">
    <Card class="register-card">
      <p slot="title" class="register-title">Hi!欢迎登录</p>
      <Form ref="formCustom" :model="formCustom" :rules="ruleCustom">
        <FormItem prop="user">
          <Input
            class="register-input"
            type="text"
            v-model="formCustom.user"
            placeholder="Username"
          >
            <Icon type="ios-person-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem prop="passwd">
          <Input
            class="register-input"
            type="password"
            v-model="formCustom.passwd"
            placeholder="Password"
          >
            <Icon type="ios-lock-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem prop="passwdCheck">
          <Input
            class="register-input"
            type="password"
            v-model="formCustom.passwdCheck"
            placeholder="Comfirm Password"
          >
            <Icon type="ios-lock-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="handleSubmit('formCustom')"
            >Signup</Button
          >
        </FormItem>
      </Form>
    </Card>
  </div>
</template>

<script>
export default {
  name: "register",
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("Please enter your password"));
      } else {
        if (this.formCustom.passwdCheck !== "") {
          // 对第二个密码框单独验证
          this.$refs.formCustom.validateField("passwdCheck");
        }
        callback();
      }
    };
    const validatePassCheck = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("Please enter your password again"));
      } else if (value !== this.formCustom.passwd) {
        callback(new Error("The two input passwords do not match!"));
      } else {
        callback();
      }
    };

    return {
      formCustom: {
        user: "",
        password: "",
        passwdCheck: "",
      },
      ruleCustom: {
        user: [
          {
            required: true,
            message: "Please fill in the user name",
            trigger: "blur",
          },
        ],
        passwd: [{ validator: validatePass, trigger: "blur" }],
        passwdCheck: [{ validator: validatePassCheck, trigger: "blur" }],
      },
    };
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          localStorage.setItem("order", JSON.stringify([]));

          this.$Message.success("Success!");
          this.$router.push({
            name: "logined",
            params: { name: this.formCustom.user },
          });
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
  },
  mounted() {
    // this.$http.getRequest({
    //   api: 'registerTest',
    //   data: {
    //     'id':'001'
    //   }
    // }).then((res) => {
    //   console.log(JSON.stringify(res.data))
    // }).catch((err) => {
    // });
  },
  updated: function () {
    // console.log('update')
  },
};
</script>

<style scoped>
.register-input {
  width: 400px;
  margin-bottom: 10px;
}
.register-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e6e6e6;
}
.register-title {
  font-size: 30px;
  font: bold;
  height: 45px;
  line-height: 49px;
}
.register-card {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
  margin: 100px;
  width: 600px;
  height: 500px;
}
</style>